<template>
  <nav class='navbar navbar-expand-lg navbar-light fixed-top' id='mainNav'>
    <div class='container'>
      <a class='navbar-brand' href="/">{{ blog.name }}</a>
      <button
        class='navbar-toggler navbar-toggler-right'
        type='button' 
        data-toggle='collapse' 
        data-target='#navbarResponsive' 
        aria-controls='navbarResponsive' 
        aria-expanded='false' 
        aria-label='Toggle navigation'>
        导航菜单
        <i class='fas fa-bars'></i>
      </button>
       
      <div class='collapse navbar-collapse' id='navbarResponsive'>
        <ul class='navbar-nav ml-auto'>
          <li class='nav-item'>
            <a class='nav-link' href='/'>首页</a>
          </li>
        </ul>
        <ul class='navbar-nav ml-auto'>
          <li class='nav-item'>
            <a class='nav-link' href='/contact'>联系我们</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
    name: 'PageNav',
    data: () => ({
      blog:{
        name: 'qing'
      }
    })
}
</script>